<template>
	<div class="rechargeList">
		<div class="qqnumber">
			<mt-field v-model="qqNumber" placeholder="请输入要充值的QQ号码" @change="changeQQ"></mt-field>
		</div>
		<div class="recharge_detail">
			<div class="pay_lists c-aj-c" v-for="(item,index) in lists" @click="goChoice(item.id,index)">
				<div :class="{active: index==rechargeIndex}">
					<div class="number">{{item.goodsName}}</div>
					<div class="price">售价：{{item.baseAmount}}元</div>
				</div>
			</div>
			<div class="pay_lists" @click="goCustom">
				<mt-field class="custom_money" placeholder="自定义金额" v-model="customMoney" @change="isNum"></mt-field>
			</div>
		</div>
		<div class="bottom_btn c-flex c-aj-c" @click="goRecharge">
			<mt-button class="immed_pay" v-if="qqAllow">立即充值</mt-button>
			<mt-button class="can_not" v-else="qqAllow">立即充值</mt-button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				qqNumber: '',
				customMoney: '',
				sheetVisible: false,
				lists: [],
				rechargeId: '',
				rechargeIndex: '',
				isnum: false,
				qqAllow: false,
			};
		},

		mounted() {
			document.title = "Q币充值";
			this.axios
				.get("api/qq/goods/list")
				.then(res => {
					var _data = res.data.data;
					this.lists = _data.list;
				})
				.catch(error => console.log(error));
		},

		methods: {
			changeQQ() {
				if (!(isNaN(this.qqNumber)) && (this.qqNumber.length) > 5) {
					this.qqAllow = true;
				} else {
					this.qqAllow = false;
					this.qqNumber = '';
					this.$messagebox({
						message: '请输入正确的qq号！',
					})
				}
			},
			goChoice(id, index) {
				this.customMoney = ' ';
				this.rechargeId = id;
				this.rechargeIndex = index;
			},
			goCustom(){
				this.rechargeIndex = -1;
			},
			isNum() {
				var _reg = /^[1-9]\d{0,5}$/;
				if (_reg.test(this.customMoney)) {
					this.isnum = true;
				} else {
					this.customMoney = '';
					this.isnum = false;
				}
			},
			goRecharge() {
				var params = {};
				params.qqNumber = this.qqNumber;
				if (this.customMoney && this.isnum) {
					params.money = this.customMoney;
				} else {
					params.goodsId = this.rechargeId;
				}

				// this.axios.defaults.headers.token = '8296a2ddbf7045d4a23103371f72501eU20190114144833448955598';
				this.axios
					.get("api/qq/order/getOrderinfo", { params: params })
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							if (window.AndroidWebView) {
								window.AndroidWebView.showInfoFromJs('qborderNo;' + _data.data.orderNum)
							} else {
								window.webkit.messageHandlers.shopWXPay.postMessage({
									type: 'qbi',
									orderNo: _data.data.orderNum
								})
							}
						}
					})
					.catch(error => console.log(error));
			},
		}
	};
</script>
<style lang="less">
	.rechargeList {
		.qqnumber {
			margin: .25rem .25rem 1rem .25rem;
			border: 1px solid #dcdcdc;
		}

		.recharge_detail {
			margin: 0 .25rem;
			display: flex;
			flex-wrap: wrap;

			.pay_lists {
				width: 2.2rem;
				height: 1rem;
				margin-bottom: .2rem;
				margin-right: .2rem;
				display: flex;
				flex-direction: column;
				border: .02rem solid #fdb62d;
				color: #fdb62d;

				.active {
					width: 100%;
					height: 100%;
					background-color: #fdb62d;
					color: #fff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.mint-cell-wrapper {
					background-image: none;
				}

				.number {
					font-weight: bold;
					font-size: .32rem;
				}

				.price {
					font-size: .26rem;
				}

				.custom_money {
					display: inline-block;
					width: 100%;
					height: 100%;
					background-image: none;
				}
			}

			.pay_lists:nth-child(3n) {
				margin-right: 0;
			}

			.pay_lists:last-child {
				background-color: #fff;
			}

		}

		.bottom_btn {
			width: 100%;
			margin: 0 auto;
			border-radius: .3rem;
			position: fixed;
			bottom: .3rem;
			left: 0;

			.mint-button--default {
				width: 95%;
				border-radius: .3rem;
				color: #fff;

				&.immed_pay {
					background-color: #fdb62d;
				}

				&.can_not {
					background-color: #dcdcdc;
				}
			}
		}

	}
</style>